<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>黑白棋</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		@keyframes drop_chess {
			0% {
				transform: scale(1.3);
				box-shadow: 0 0 10px 10px #fff;
			}
			80% {
				transform: scale(0.8);
				box-shadow: 0 0 10px 3px #fff;
			}
			100% {
				transform: scale(1);
			}
		}
		body {
			background-color: #ccc;
		}
		.container {
			padding: 1rem;
		}
		.title {
			font-size: 3rem;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1rem;
		}
		
		.tab {
			border-collapse: collapse;
			margin: 0 auto;
			/* min-width: 103rem; */
		}
		.tab td {
			/* width: 7rem; */
			/* height: 7rem; */
			border: 0.1rem solid red;

		    perspective: 500px;
		}

		.chess {
			/* width: 7rem; */
			/* height: 7rem; */
			/* border-radius: 50%; */
			position: relative;
			transform-style: preserve-3d;
			transition: transform 0.8s ease-in-out;

			/* animation: drop_chess 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); */
		}
		.chess .front, .chess .back {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: black;
			position: absolute;
			top: 0;
			left: 0;

			backface-visibility: hidden;
			transform-style: preserve-3d;

			z-index: 1;
		}
		.chess .back {
			background-color: white;
			z-index: 5;
			transform: rotateY(180deg);
		}
		.chess.white {
			transform: rotateY(180deg);
		} 
		/* .chess:hover {
			transform: rotateY(180deg);
		} */
	</style>
</head>
<body>

<div class="container">
	<div class="title">
		<span>黑白棋</span>
		<button type="button" style="font-size: 2rem;" id="restartBtn" >重新开始</button>
	</div>
	<div class="content">
		<table class="tab">
			<tbody>
				
			</tbody>
		</table>
	</div>
	<!-- <hr>
	<div class="chess">
		<div class="front"></div>
		<div class="back"></div>
	</div> -->
</div>

<script>
	global = window;
	(function (global) {
		let width = 8;// rem
		let step = 0;
		let tabArr = [];
		let colorArr = ['black', 'white'];
		let size = 9;
		let tab;
		let restartBtn;
		function initTab() {
			step = 0;
			tabArr = [];
			tab.innerHTML = '<tbody></tbody>';
			for(let i=0; i<size; i++) {
				let tr = tab.insertRow();
				let trArr = [];
				for(let j=0; j<size; j++) {
					let td = tr.insertCell();
					td.style.width = width+'rem';
					td.style.height = width+'rem';
					td.setAttribute('row', i);
					td.row = i;
					td.setAttribute('col', j);
					td.col = j;
					trArr[j] = {td, row: i, col: j, color: null, div: null};
				}
				tabArr[i] = trArr;
			}
		}
		function bindDropEvent(table){
			table.addEventListener('click', function(e){
				let target = e.target;
				if (target.tagName) {
					switch (target.tagName) {
						case 'DIV':
							alert('该位置已有棋子');
							break;
						case 'TD':
							dropChess(target);
							break;
						default:
							break;
					}
				}
			});
		}
		function dropChess(td) {
			let row = td.row;// td.getAttribute('row');
			let col = td.col;// td.getAttribute('col');
			let chess = tabArr[row][col];
			if (chess.color) {
				alert('该位置已有棋子');
				return;
			}

			let color = colorArr[step%2];
			
			// let div = document.createElement('div');
			// div.className = color;

			let div = createChessDiv(color);
			td.appendChild(div);

			step++;

			chess.color = color;
			chess.div = div;
			
			//console.log('chess:', chess);
			chessRuleCalculate(chess);
		}
		function createChessDiv(color) {
			let chessDiv = document.createElement('div');
			let frontDiv = document.createElement('div');
			let backDiv = document.createElement('div');
			chessDiv.style.width = width+'rem';
			chessDiv.style.height = width+'rem';
			chessDiv.className = "chess " + color;
			frontDiv.className = 'front';
			backDiv.className = 'back';
			chessDiv.appendChild(frontDiv);
			chessDiv.appendChild(backDiv);
			return chessDiv;
		}
		function chessRuleCalculate(chess) {
			horizontalRuleCalculate(chess);
			verticalRuleCalculate(chess);
		}
		function horizontalRuleCalculate({row, col, color}){
			// 水平
			let matchFlag = false;
			// ->
			let arr = [];
			let col1 = col+1;
			while(tabArr[row][col1] && tabArr[row][col1].color !== null){
				if (tabArr[row][col1].color === color) {
					matchFlag = true;
					break;
				}
				arr.push(tabArr[row][col1]);
				col1++;
			}
			//console.log('right:', matchFlag, arr);
			if (matchFlag) {
				doChangeColor(color, arr);
			}

			// <-
			matchFlag = false;
			arr = [];
			col1 = col-1;
			while(tabArr[row][col1] && tabArr[row][col1].color !== null){
				if (tabArr[row][col1].color === color) {
					matchFlag = true;
					break;
				}
				arr.push(tabArr[row][col1]);
				col1--;
			}
			//console.log('left:', matchFlag, arr);
			if (matchFlag) {
				doChangeColor(color, arr);
			}
		}
		function verticalRuleCalculate({row, col, color}){
			// 垂直
			let matchFlag = false;
			// up
			let arr = [];
			let row1 = row-1;
			if (row1 >= 0) {
				while(tabArr[row1][col] && tabArr[row1][col].color !== null){
					if (tabArr[row1][col].color === color) {
						matchFlag = true;
						break;
					}
					arr.push(tabArr[row1][col]);
					row1--;
					if (row1 < 0) {
						break;
					}
				}
			}
			//console.log('up:', matchFlag, arr);
			if (matchFlag) {
				doChangeColor(color, arr);
			}

			// down
			matchFlag = false;
			arr = [];
			row1 = row+1;
			if (row1 < size) {
				while(tabArr[row1][col] && tabArr[row1][col].color !== null){
					if (tabArr[row1][col].color === color) {
						matchFlag = true;
						break;
					}
					arr.push(tabArr[row1][col]);
					row1++;
					if (row1 >= size) {
						break;
					}
				}
			}
			
			//console.log('down:', matchFlag, arr);
			if (matchFlag) {
				doChangeColor(color, arr);
			}
		}
		function doChangeColor(currentColor, arr){
			for(let i=0; i<arr.length; i++) {
				arr[i].color = currentColor;
				arr[i].div.className = "chess " + currentColor;
			}
		}

		function resetHtmlSize() {
			let rootEl = document.getElementsByTagName('html')[0];
			let docEl = document.documentElement;
			let cw = docEl.clientWidth;
			// if (cw > 750) cw = 750;
			if (cw > 980) cw = 980;
			let rem = cw / 750 * 10;
			// 1rem = 10px
			rootEl.style.fontSize = rem + 'px';
		}

		global.onload = function() {
			resetHtmlSize();

			tab = document.getElementsByClassName('tab')[0];
			restartBtn = document.getElementById('restartBtn');
			initTab();
			bindDropEvent(tab);

			restartBtn.addEventListener('click', function(){
				initTab();
			});
		};
		global.onresize = function() {
			resetHtmlSize();
		};
	})(window == undefined ? this : window);
</script>
</body>
</html>